<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04发微博</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        .box{
            width: 600px;
            margin: 100px auto;
            border:1px solid #ccc;
            padding: 20px;
            height: auto;
        }
        textarea{
            width: 450px;
            resize: none;  /*固定使其不可拖拉*/
        }
        .box li{
            line-height: 30px;
            border-bottom: 1px dashed #ccc;
            padding-left: 80px;
            width: 450px;
        }
        .box ul a{
            float: right;
        }
    </style>
    <script>
        window.onload = function(){
            var btn = document.getElementsByTagName("button")[0];
            var txt = document.getElementsByTagName("textarea")[0];
            //创建ul并追加
            var ulEle = document.createElement("ul");
            btn.parentNode.appendChild(ulEle);
            btn.onclick = function(){
                if(txt.value==""){
                    alert("内容不能为空");
                    return;  //停止代码执行
                }
                //创建li
                var liEle = document.createElement("li");
                liEle.innerHTML = txt.value+"<a href ='javascript:;'>删除</a>";
                txt.value="";  //清空
                //判断有无li，把新添加的li放在最前面
                var lis = ulEle.children;
                if(lis.length==0){
                    ulEle.appendChild(liEle)
                }else{
                    ulEle.insertBefore(liEle,lis[0]);
                }
                //点击删除按钮时进行删除
                var as = document.getElementsByTagName("ul")[0].getElementsByTagName("a");
                for(var i=0;i<as.length;i++){
                    as[i].onclick = function(){
                        ulEle.removeChild(this.parentNode);  //从ul中移除当前的li
                    }
                }
            }

        }
    </script>
</head>
<body>
<div class="box">
    微博发布：<textarea id="" name="" cols="40" rows="10" ></textarea><button>发布</button>
    <!--<ul>-->
        <!--<li>合法你考虑到发交话费拉克丝发挥到了开始<a href="javascript:;">删除</a></li>-->
    <!--</ul>-->
</div>
</body>
</html>